<template>
<!-- 办事指南 -->
  <div>
    <!-- 顶部导航栏 --> 
    <van-nav-bar  :title="header"  />
    <div>
      <div class="suceImg-box">
        <div class="suce-img">
          <img src="../../../../../assets/img/chenggong.png" alt="">
        </div>
        <div class="thear">报名成功</div>
        <div class="thear-title">希望您的学问更深一层~</div>
      </div>
      <div class="form">
        <!-- 姓 名 -->
          <div class='enroll-item'>
            <div class='item-title'>姓 名</div>
            <!-- <div class='item-xing'>*</div> -->
            <input class='item-content' type='text' disabled="disabled" v-model="olderName">
          </div>
          <!-- 姓 别 -->
          <div class='enroll-item'>
            <div class='item-title'>性 别</div>
            <!-- <div class='item-xing'>*</div> -->
            <input class='item-content' type='text' disabled="disabled" v-model="olderSex">
          </div>
          <!-- 出生年月 -->
          <div class='enroll-item'>
            <div class='item-title'>出生年月</div>
            <!-- <div class='item-xing'>*</div> -->
            <input class='item-content' type='text' disabled="disabled" v-model="olderBirth">
          </div>
          <!-- 移动电话 -->
          <div class='enroll-item phon'>
            <div class='item-title'>移动电话</div>
            <!-- <div class='item-xing'>*</div> -->
            <input class='item-content' type='text' disabled="disabled" v-model="olderPhone">
          </div>
          <!-- 按钮 -->
        <div class="inforBtn">
          <button class="return btn" @click="oNreturn">返回首页</button>
          <button class="returnThear btn" @click="returnThear" >返回我的报名</button>
        </div>
      </div>
    </div>
  </div>
</template>

 <script>
 import apiHttp from '../../../../../api/index'
 import { Toast } from 'vant';
   export default {
    data(){
      return{
        olderId:this.$route.query.olderId ? this.$route.query.olderId : '',  // 判断页面是否存在id
        header:"报名成功",
        olderName:"",
        olderSex:"",
        olderBirth:"",
        olderPhone:""
      }
    },
    
    methods:{
      // 返回首页
      oNreturn(){
        console.log()
         this.$router.push({path:"/"});
      },
      // 返回我的报名
      returnThear(){
        this.$router.push({path:"../../../ComList/listoNservice/signUp"});
      },
      getMyOlderById(){
        let params = {
          olderId:this.olderId,
          userId:sessionStorage.getItem('userId')
        } 
        apiHttp.comIndex.getMyOlderById(params,resp=>{
          if(resp.resultCode == '000000'){
              this.olderName = resp.data.older.olderName
              if(resp.data.older.olderSex == 1){
                this.olderSex = '男'
              }else{
                this.olderSex = '女'
              }
              this.olderBirth = resp.data.older.olderBirth
              this.olderPhone = resp.data.older.olderPhone
            }else{
            Toast(resp.resultMsg)
          }
        })
      }
    },
    mounted(){
      this.getMyOlderById();
    },
   }
 </script>
 <style scoped>
    .suceImg-box{
      width:100%;
      background-color:#ffffff;
      text-align: center;
      margin-bottom: 0.5rem;
    }
    .suce-img{
      width:4rem;
      margin: 0 auto;
      margin-top: 0.2rem;
      padding: 0.7rem 0 1rem 0;
    }
    .thear{
      font-size: 0.7rem;
      font-weight: 600;
    }
    .thear-title{
      font-size: 0.6rem;
      color: #999999;
      padding: 0.5rem 0 1.5rem 0;
    }
    .form{
     margin: 0 auto;
     background-color:#fff;
     font-size: 0.7rem;
     margin-top: 0.4rem;
   }
   .enroll-item {
      display: flex;
      flex-direction: row;
      padding: 0 0.5rem;
      height: 2rem;
      flex-wrap: nowrap;
      align-items: center;
      width: 92%;
      margin: 0 auto;
      border-bottom: 1px solid #D8D8D8;
    }
    .phon{
      border-bottom: 0px;
    }
    .item-title {
      font-size: 30rpx;
      color: #000000;
      white-space: nowrap;
    }
    .item-content {
      color: #000;
      flex: 1;
      text-align: right;
      background-color: transparent;
      
    }
    input{
      border:none;
    }
    .inforBtn{
      bottom: 1rem;
      position: fixed;
      width: 90%;
      line-height: 1.8rem;
      color: #FFFFFF;
      /* left:0px; */
      right:0px;

    }
    .return{
      background-color: #FF9C00;
    }
    .btn{
      width:40%;
      margin: 0 0.4rem;
      border: none;
      border-radius: 6px;
      font-size: 0.65rem;
    }
    .returnThear{
      background-color:#D33043;
    }
 </style>
